<template lang="pug">
el-dialog(
  class="dashboard-dialog"
  :visible="value"
  :width="width"
  :close-on-click-modal="false"
  :append-to-body="true"
  :show-close="false"
)
  template(#header="{ close }")
    .dashboard-card-header
      .title {{ title }}
      .close(@click="close")
  slot
</template>

<script setup name="DashboardDialog">
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '660px'
  }
});
</script>
<style lang="scss">
.dashboard-dialog {
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-dialog__header {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    padding: 0 0 0 20px;
    margin: 0;
    .dashboard-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .title {
      width: 184px;
      height: 39px;
      line-height: 39px;
      padding-left: 10px;
      background: rgba(0, 0, 10, 0.8);
      box-shadow: inset 0px 0px 48px 0px rgba(82,232,227,0.54), 0px 4px 10px 0px rgba(0,0,0,0.302);
      border-radius: 4px 4px 4px 4px;
      border: 2px solid;
      border-image: linear-gradient(205deg, rgba(82.00000271201134, 232.00000137090683, 198.00000339746475, 0), rgba(82.00000271201134, 232.00000137090683, 198.00000339746475, 1)) 2 2;
      font-weight: 700;
      font-size: 16px;
      color: #FFFFFF;
    }
    .close {
      width: 70px;
      height: 42px;
      background: url('../../assets/images/common/dialog_close.png')
        center center no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .el-dialog__body {
    background: #02282C;
    color: #ffffff;
    box-shadow: inset 0px 0px 87px 0px rgba(82,232,227,0.35), 0px 4px 10px 0px rgba(0,0,0,0.302);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid;
    padding: 40px 20px 20px;
    border-image: linear-gradient(138deg, rgba(82.00000271201134, 232.00000137090683, 198.00000339746475, 1), rgba(82.00000271201134, 232.00000137090683, 227.00000166893005, 0.30000001192092896)) 1 1;
  }
}
</style>
